<template>
	<view class="page" style="padding: 80rpx;">
		<view class="">
			<view class="status_bar"></view>
			<view class="flex">
				<u-icon name="close" size="35" class="close" @click="navTo"></u-icon>
				<view class="flex-1 font-big u-p-y-20 text-center u-m-r-20 font-34 font-weight-bold" style="color:#333333;">忘记密码</view>
			</view>
		</view>
		<u-form class="u-m-t-50" :model="form" ref="uForm" label-position="left" :labelStyle="{fontSize: '28rpx', fontWeight: 'bold',color: '#333'}">
			<u-form-item prop="mobile" left-icon="../static/login/phone.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input v-model="form.mobile" type="number" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item prop="captcha" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<view class="flex flex-1">
					<u-input class="flex-1" v-model="form.captcha" type="number" placeholder="请输入短信验证码" />
					<dy-phone-code-button :mobile="form.mobile" event="modify"></dy-phone-code-button>
				</view>
			</u-form-item>
			<u-form-item prop="newpwd" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input :clearable="false" placeholder="请设置新的登录密码" v-model="form.newpwd" type="password" />
			</u-form-item>
			<u-form-item prop="newpwd2" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input :clearable="false" placeholder="请再次输入登录密码" v-model="form.newpwd2" type="password" />
			</u-form-item>
		</u-form>
		<view class="flex flex-column align-center justify-center u-m-t-30">
			<dy-button size="default" color="#fff" width="576rpx" fontSize="30rpx" fontWeight="700" @click="subBt">确认修改</dy-button>
		</view>
	</view>
</template>

<script>
	import { BaseCenterApi } from "@/api/serves.js"
	import {	mapMutations } from 'vuex'
	export default {
		data() {
			return {
				form: {
					mobile: '',
					captcha: '',
					newpwd: '',
					newpwd2: '',
				},
				loading: false,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (this.$u.test.mobile(value)) {
									callback();
								} else {
									callback(new Error("请输入正确的手机号码"));
								}
							},
						},
					],
					captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change',
						trigger: ['blur'],
					}],
					newpwd: [{
						required: true,
						min: 6,
						max: 15,
						message: '请输入6-15位密码',
						trigger: 'change',
						trigger: ['blur'],
					}],
					newpwd2: [{
							required: true,
							min: 6,
							max: 15,
							message: '请输入6-15位密码',
							trigger: 'change',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (value == this.form.newpwd) {
									callback();
								} else {
									callback(new Error("密码不一致"));
								}
							},
						}
					],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			navTo() {
				uni.navigateBack()
			},
			subBt() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.login()
					}
				});
			},
			login() {
				this.loading = true
				this.$ShowLoading()
				BaseCenterApi.resetpwd(this.form).then(res => {
					console.log(res);
					this.$HideLoading()
					this.$Toast(res.msg, 2000)
					if (res.code == 1) {
						this.loading = false
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		background-color: #fff;
	}

	.u-border-bottom:after {
		border-color: #e4e4e4;
	}
</style>
